<template>
	<view class="wrapper">
		<div class="header bfff">
			<!-- 待付款头部 -->
			<div class="tip" v-if="detail.state==0">
				<div class="f40 fbold t-red mb36">待付款</div>
				<div class="f26 c666 flex-start">剩余 <span class="t-red"><up-count-down @finish="cancel" :time="time"
							format="HH:mm:ss"></up-count-down></span> 未支付订单将自动关闭</div>
			</div>
			<!-- 代发货头部 -->
			<div class="tip" v-else-if="detail.state==1">
				<div class="center align-start">
					<image src="@/static/mall/beihuo1.png" mode="widthFix" class="car-icon"></image>
					<div class="f40 fbold mb36 ml10 flex1">备货中</div>
					<image src="@/static/mall/shop_moreTalk.png" mode="widthFix" class="arrow-icon"></image>
				</div>
				<div class="f26 c666">积分兑换成功后48小时内发货</div>
			</div>
			<!-- 已发货头部 -->
			<navigator hover-class="none" :url="'./wuLiu?orderId='+orderId" class="tip" v-else-if="detail.state==2">
				<div class="center align-start">
					<image src="@/static/mall/wuliu.png" mode="widthFix" class="wuliu-icon"></image>
					<div class="f40 fbold mb36 ml10 flex1">{{state==3?'已签收':'运输中'}}</div>
					<image src="@/static/mall/shop_moreTalk.png" mode="widthFix" class="arrow-icon"></image>
				</div>
				<div class="f26 mb15 c666 line15">{{list.content}}</div>
				<div class="f20 c666">{{list.time}}</div>
			</navigator>
			<!-- 已完成头部 -->
			<div class="tip" v-else-if="detail.state==3">
				<div class="center align-start">
					<image src="@/static/mall/shop_checked.png" mode="widthFix" class="t-icon"></image>
					<div class="f40 fbold mb36 ml15 flex1">已签收</div>
					<image src="@/static/mall/shop_moreTalk.png" mode="widthFix" class="arrow-icon"></image>
				</div>
				<div class="f26 c666">您的订单已签收</div>
			</div>
			<!-- 地址 -->
			<div class="address-box mt30">
				<div class="flex-start mb10">
					<image src="../../static/mall/address.png" mode="widthFix" class="address-icon"></image>
					<div class="ml10 f30 mr16">{{detail.receiver}}</div>
					<div class="f30">{{detail.receiverPhone}}</div>
				</div>
				<div class="center align-start">
					<div class="address-icon"></div>
					<div class="f30 flex1 fWrap mr22 ml5">{{detail.receiverAddress}}</div>
					<!-- <div class="f28 change center">修改</div> -->
				</div>
			</div>
		</div>
		<div class="main">
			<div class="bfff center box1 mb30" v-for="v in detail.goodsList" :key="v.specs">
				<image :src="v.goodsImg" mode="aspectFill" class="goods-cover"></image>
				<div class="ml28 flex1">
					<div class="f30 line2 mb40">{{v.goodsName}}</div>
					<div class="space-between">
						<div class="f26 c999">{{v.specs}}</div>
						<div class="f20 t-red"><span class="f40 fbold mr16">{{v.amount}}</span>积分</div>
					</div>
				</div>
				<div></div>
			</div>
			<div class="bfff notes flex-start mb30">
				<div class="f30 mr8">备注</div>
				<input type="text" disabled v-model="detail.remarks" placeholder="请输入您需要备注的内容" placeholder-class="c999"
					class="f30 flex1" />
			</div>
			<div class="box1 box2 bfff">
				<div class="f26 flex-start" v-if="detail.state==2">
					<div class="f26 name">快递单号:</div>
					<div>{{no}}</div>
					<div class="f26 t-pink ml40" @click="copyNo">复制</div>
				</div>
				<!-- <div class="f26 flex-start">
					<div class="f26 name">发货时间:</div>
					<div>20240810-378888</div>
				</div> -->
				<div class="f26 flex-start">
					<div class="f26 name">订单号:</div>
					<div>{{detail.orderNo}}</div>
				</div>
				<div class="f26 flex-start">
					<div class="f26 name">支付方式:</div>
					<div>积分兑换</div>
				</div>
				<div class="f26 flex-start">
					<div class="f26 name">下单时间:</div>
					<div>{{detail.createTime}}</div>
				</div>
				<div class="f26 flex-start">
					<div class="f26 name">总价:</div>
					<div>{{detail.totalAmount}}</div>
				</div>
			</div>
		</div>
		<!-- 底部按钮 -->
		<div class="t-bott bfff posf">
			<btns :v="detail" @reset="getgoodsList"></btns>
		</div>

	</view>
</template>

<script>
	import btns from './components/btns.vue'
	export default {
		data() {
			return {
				detail: {
					goodsList: []
				},
				orderId: '',
				list: {},
				state: 1,
				no: '',
				time: ''
			}
		},
		components: {
			btns
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.getgoodsList()
		},
		methods: {
			cancel() {
				this.$http('/api/mall/order/cancel', {
					phone: uni.getStorageSync('uInfo').phone,
					orderNo: this.orderId
				}, true, 'POST').then((r) => {
					uni.showToast({
						title: '订单已取消'
					})
					this.getgoodsList()
				})
			},

			copyNo() {
				uni.setClipboardData({
					data: this.no
				})
			},
			// 查询订单详情
			getgoodsList() {
				this.$http('/api/mall/order/view', {
					orderNo: this.orderId
				}).then((r) => {
					this.detail = r.data
					this.time = (new Date(r.data.createTime).getTime() + 3600000) - new Date().getTime()
					if (r.data.state == 2) {
						this.getlogistics()
					}
				})
			},
			// 查询收货地址
			getlogistics() {
				this.$http(`/api/logistics/view?orderNo=${this.orderId}&token=${uni.getStorageSync('uInfo').token}`).then((
					r) => {
					const data = JSON.parse(r.data)
					console.log(data)
					this.list = data.list[0]
					this.state = data.state
					this.no = data.no
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.t-pink {
		color: #FA678C;
	}

	.t-bott {
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 40rpx 60rpx;
		border-radius: 12rpx 12rpx 0 0;


	}

	.header {
		width: 750rpx;
		padding: 44rpx 60rpx 30rpx;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 30rpx rgba(230, 230, 230, 1);

		.t-red {
			color: rgba(255, 85, 85, 1);
		}

		.tip {
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid rgba(195, 195, 195, 1);

			.car-icon {
				width: 39rpx;
				height: 39rpx;
			}

			.arrow-icon {
				width: 12rpx;
				height: 24rpx;
			}

			.wuliu-icon {
				width: 40rpx;
				height: 30rpx;
			}

			.t-icon {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.address-box {
			.address-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.change {
				width: 122rpx;
				height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid rgba(196, 196, 196, 1);
			}

			.flex1 {
				line-height: 48rpx;
			}
		}

	}

	.main {
		padding: 30rpx 32rpx 60rpx;

		.box2 {
			.name {
				width: 140rpx;
			}

			.flex-start:not(:last-child) {
				margin-bottom: 35rpx;
			}
		}

		.box1 {
			width: 686rpx;
			padding: 32rpx 28rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(230, 230, 230, 1);

			.goods-cover {
				width: 190rpx;
				height: 190rpx;
				border-radius: 12rpx;
			}

			.line2 {
				line-height: 44rpx;
			}

			.t-red {
				color: rgba(255, 85, 85, 1);
			}
		}

		.notes {
			width: 686rpx;
			padding: 26rpx 28rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(230, 230, 230, 1);
			color: rgba(104, 104, 104, 1);

			.f30 {
				width: 90rpx;
			}
		}
	}
</style>